﻿@{
    Uri url = new Uri(Request.Url.AbsoluteUri);
    ViewBag.Server = url.GetLeftPart(UriPartial.Authority);
}


<!DOCTYPE html>
<html>
<head>
    <title></title>

</head>
<body>
    <div id="portraitsdiv" class="portraits k-content">
        
       <h3>
            RVA is offering printed portraits of your children. These portraits will be delivered in at the end of term packet
             with your oldest child. Your account will be charged.
        </h3>
        <p>Click on the Pencil icon to edit, then click the Check icon to save.</p>
        <p><b>Orders MUST be placed by November 9th to be delivered this term.</b></p>
        <p>Sometime in the next month or so, we will ALSO provide a download link for you to download an electronic copy of your pictures.</p>
        <p>Your total charges are: <span data-bind="text: grandTotal"></span></p>
           <div id="portraitOrders">
           </div>
        <p>Your total charges are: <span data-bind="text: grandTotal"></span></p>
    </div>


    <script type="text/x-kendo-tmpl" id="portrait-template">
        <div class="portraitgroup">
            <div class="portraitcontent">
                <div class="pic">
                    <img src="/images/Students/#:StudentID#.jpg" />
                </div>
                <dl>
                    <dt>Wallets (#:Price_Wallets4#/=)</dt>
                    <dd>#:Wallets4#, Cost: #:Price_TotalWallets4()#</dd>
                    <dt>4x6 (#:Price_Print4x6#/=)</dt>
                    <dd>#:Print4x6#, Cost: #:Price_Total4x6()#</dd>
                    <dt>5x7 (#:Price_Print5x7#/=)</dt>
                    <dd>#:Print5x7#, Cost: #:Price_Total5x7()#</dd>
                    <dt>8x10 (#:Price_Print8x10#/=)</dt>
                    <dd>#:Print8x10#, Cost: #:Price_Total8x10()#</dd>
                    <dt>--------</dt><dd>-------</dd>
                    <dt>Total Cost:</dt>
                    <dd>#:Price_Total()#</dd>

                </dl>
                <div class="edit-buttons">
                    <a class="k-button k-edit-button" href="\\#">EDIT<span class="k-icon k-edit"></span></a>
                </div>
            </div>
        </div>
    </script>

    <script type="text/x-kendo-tmpl" id="portrait-editTemplate">
        <div class="portraitgroup">
            <div class="portraitcontent">
                <div class="pic">
                    <img src="/images/Students/#:StudentID#.jpg" />
                </div>
                <dl>
                    <dt>Wallets (#:Price_Wallets4#/=)</dt>
                    <dd>
                        <input type="text" data-bind="value: Wallets4" data-role="numerictextbox" data-type="integer" name="QtyWallets" required="required" min="0" data-decimals="0" data-format="n0" validationmessage="required" />
                        <span data-for="QtyWallets" class="k-invalid-msg"></span>
                        Cost: <span data-bind="text: Price_TotalWallets4"></span>
                    </dd>
                    <dt>4x6 (#:Price_Print4x6#/=)</dt>
                    <dd>
                        <input type="text" data-bind="value:Print4x6" data-role="numerictextbox" data-type="integer" name="QtyPrint4x6" required="required" min="0" data-decimals="0" data-format="n0" validationmessage="required" />
                        <span data-for="QtyPrint4x6" class="k-invalid-msg"></span>
                        Cost: <span data-bind="text: Price_Total4x6"></span>
                    </dd>
                    <dt>5x7 (#:Price_Print5x7#/=)</dt>
                    <dd>
                        <input type="text" data-bind="value:Print5x7" data-role="numerictextbox" data-type="integer" name="QtyPrint5x7s" required="required" min="0" data-decimals="0" data-format="n0" validationmessage="required" />
                        <span data-for="QtyPrint5x7" class="k-invalid-msg"></span>
                        Cost: <span data-bind="text: Price_Total5x7"></span>
                    </dd>
                    <dt>8x10 (#:Price_Print8x10#/=)</dt>
                    <dd>
                        <input type="text" data-bind="value:Print8x10" data-role="numerictextbox" data-type="integer" name="QtyPrint8x10" required="required" min="0" data-decimals="0" data-format="n0" validationmessage="required" />
                        <span data-for="QtyPrint8x10" class="k-invalid-msg"></span>
                        Cost: <span data-bind="text: Price_Total8x10"></span>
                    </dd>
                    <dt>--------</dt>
                    <dd>-------</dd>
                    <dt>Total Cost:</dt>
                    <dd><span data-bind="text: Price_Total"></span></dd>

                </dl>

                <div class="edit-buttons">
                    <a class="k-button k-update-button" href="\\#">SAVE<span class="k-icon k-update"></span></a>
                    <a class="k-button k-cancel-button" href="\\#">CANCEL<span class="k-icon k-cancel"></span></a>
                </div>
            </div>
    </script>

    <script>
        $(document).ready(function () {
            var currenturl = "@ViewBag.Server";
            var crudServiceBaseUrl = currenturl + "/api/";
            
            var ordersModel = kendo.observable({
                grandTotal: 0,
                portraitOrdersSource: new kendo.data.DataSource({
                    transport: {
                        read: {
                            url: "",
                            dataType: "json"
                        },
                        update: {
                            url: crudServiceBaseUrl + "alltables/PORTRAIT_Orders",
                            dataType: "json",
                            type: "put"
                        },
                        destroy: {
                            url: crudServiceBaseUrl + "alltables/PORTRAIT_Orders/Destroy",
                            dataType: "json"
                        },
                        create: {
                            url: crudServiceBaseUrl + "alltables/PORTRAIT_Orders/Create",
                            dataType: "json"
                        },
                        parameterMap: function (options, operation) {
                            if (operation !== "read" && options.models) {
                                return { models: kendo.stringify(options.models) };
                            }
                        }
                    },
                    batch: true,
                    schema: {
                        model: {
                            id: "StudentID",
                            fields: {
                                StudentID: { editable: false, nullable: true },
                                Wallets4: { type: "number" },
                                Print4x6: { type: "number" },
                                Print5x7: { type: "number" },
                                Print8x10: { type: "number" },
                                Price_Wallets4: { editable: false, type: "number" },
                                Price_Print4x6: { editable: false, type: "number" },
                                Price_Print5x7: { editable: false, type: "number" },
                                Price_Print8x10: { editable: false, type: "number" },
                                School_Year: { type: "string" },
                                School_Term: { type: "number" },
                                Price_OneTotal: {type: "number" }
                            },
                            Price_TotalWallets4: function () {
                                return this.get("Wallets4") * this.get("Price_Wallets4");
                            },
                            Price_Total4x6: function () {
                                return this.get("Print4x6") * this.get("Price_Print4x6");
                            },
                            Price_Total5x7: function () {
                                return this.get("Print5x7") * this.get("Price_Print5x7");
                            },
                            Price_Total8x10: function () {
                                return this.get("Print8x10") * this.get("Price_Print8x10");
                            },
                            Price_Total: function () {
                                this.set("Price_OneTotal", this.Price_Total4x6() + this.Price_Total5x7() + this.Price_Total8x10() + this.Price_TotalWallets4());
                                return this.get("Price_OneTotal");
                            }

                        }

                    },
                    aggregate:
                        { field: "Price_OneTotal", aggregate: "sum" },
                    change: function () {
                        ordersModel.set("grandTotal", this.aggregates().Price_OneTotal.sum);
                    }

                })
            });

            ordersModel.portraitOrdersSource.transport.options.read.url = crudServiceBaseUrl + "alltables/MyPortraitOrders?Where=ParentID=" + viewModel.get("currentPersonID");
            ordersModel.portraitOrdersSource.read();

            var listView = $("#portraitOrders").kendoListView({
                dataSource: ordersModel.portraitOrdersSource,
                template: kendo.template($("#portrait-template").html()),
                editTemplate: kendo.template($("#portrait-editTemplate").html()),
                edit: function (e) {
                    $('[data-role="numerictextbox"]').each(function () {
                        $(this).getKendoNumericTextBox().bind("spin", function () { this.trigger("change"); });
                    });
                }
            }).data("kendoListView");

            
            kendo.bind($("#portraitsdiv"), ordersModel);
        });
    </script>

    <style>
        /*.portraitgroup {
            position: relative;
            top:0;
            display:block;
            width: 80%;
            left: 10%;
            height:200px;
        }

        .portraitgroup > .pic {
            float: left;
        }

        .portraitgroup > dl {
             position: relative;
             width: 100%;
        }

        .portraitgroup > dl > dt {
            position: relative;
            width:30%;
            float: left;
            margin-right: 10%;
            text-align: right;
        }

        .portraitgroup > dl > dd {
            position: relative;
            width:60%;
            margin: 0;
        }
        .portraitgroup > dl > dd .k-numerictextbox {
            max-width: 40%;
            width: 40%;
        }

        .portraitgroup .edit-buttons {

            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: right;
            padding: 5px;
            background-color: rgba(0,0,0,0.1);
        }*/
        .portraitgroup {
            position: relative; 
            display: block;         
            width: 80%;
            left: 10%;
            max-width: 600px;
        }
        .portraitgroup:before{
                padding: 0;
    margin: 0;
    border: 0;
	content: "";
	display: block;
	padding-top: 50%; 	
}
        .portraitcontent {
    padding: 0;
    margin: 0;
    border: 0;
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
        }
.portraitgroup .pic {
    position: relative;
    float: left;
    width: 30%;
    max-width:200px;
    z-index: 1;
}
.pic img {
    position: relative;
    width: 100%;
}
.portraitgroup dt {
    position:relative;
    display: block;
    float: left;
    width: 30%;
    margin-right: 5%;
    text-align: right;
}
.portraitgroup dd {
    float: left;
    width: 30%;
    margin: 0;
    text-align: left;
}
           .portraitgroup .k-numerictextbox {
            max-width: 40%;
            width: 40%;
        }

        .portraitgroup .edit-buttons {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            text-align: right;
            padding: 5px;
            background-color: rgba(0,0,0,0.1);
        }

        span.k-invalid-msg {
            position: absolute;
            margin-left: 6px;
        }

        .portraits {
            width: 90%;
            left: 5%;
        }


        @@media only screen and (max-width : 620px) {

            .portraitgroup {
                width: 100%;
                left: 0;
                font-size: smaller;
            }

                .portraitgroup > dl > dt {
                    margin-right: 5%;
                }

        }

    </style>



</body>

</html>